<template>
  <!-- 使用van-cell-group组件循环渲染lists数组中的每一项 -->
  <van-cell-group v-for="item in lists" :key="item">
    <!-- 使用van-cell组件渲染每一项的内容 -->
    <van-cell center 
      :icon="item.img"
      :title="item.title"
      :value="item.value"
      :label="item.label"
    />
  </van-cell-group>
</template>
  
<script setup>
// 定义lists数组，包含四个对象，每个对象包含img、title、value和label属性
const lists = [
  {
    img: '/images/avatar1.jpg',
    title: '食品旗舰店',
    value: '星期一',
    label: "您有一条店铺消息"
  },
  {
    img: '/images/avatar2.jpg',
    title: '水果旗舰店',
    value: '星期二',
    label: "亲爱的果粉："
  },
  {
    img: '/images/avatar3.png',
    title: '订阅号消息',
    value: '星期日',
    label: "水果旗舰店：【新到水果新品————粑粑柑、砂糖橘】"
  },
  {
    img: '/images/avatar4.png',
    title: '消息号内容',
    value: '星期一',
    label: "食品旗舰店：大量新品到货，速来选购"
  }
]
</script>

<style lang="less" scoped>
  /* 使用:deep选择器，修改van-cell组件的样式 */
  :deep(.van-cell) {
  /* 修改van-cell组件的left-icon样式 */
  .van-cell left-icon {
    width: 40px;
    height: 40px;
    /* 修改van-icon组件的image样式 */
    .van-icon image {
      width: 100%;
      height: 100%;
    }
  }
  /* 修改van-cell组件的title样式 */
  .van-cell   title {
    /* 修改van-cell组件的label样式 */
    .van-cell   label {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 165px;
    }
  }
}
</style>